<script setup>
	const props = defineProps({
		list: Array
	})
	const emits = defineEmits(['listItemClick'])
	const listItemClick = (index) => {
		emits('listItemClick', index)
	}
</script>

<template>
	<view class="list">
		<view class="row" v-for="(item, index) in list" :key="index" @click="listItemClick(index)">
			<view class="left">
				<image :src="item.imagePath"></image>
			</view>
			<view class="right">
				<view class="column">
					<text>{{ item.title }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<style scoped lang="scss">
	.list {
		width: 100%;

		.row {
			border-radius: 4vw;
			background-color: $uni-bg-color;
			padding: 1vh 3vw;
			display: flex;
			flex-direction: row;

			&:not(:first-child) {
				margin-top: 2vh;
			}

			.left {
				image {
					width: 12vw;
					height: 12vw;
					border-radius: 50%;
				}
			}

			.right {
				padding-left: 4vw;
				display: flex;
				align-items: center;

				.column {
					display: flex;
					flex-direction: column;

				}
			}
		}
	}
</style>